<!--大额客户发起汇兑管理画面-->
<template>
    <div class="app-container">
      <h1>111qwer22</h1>
  
      <el-button @click="confirm1">按钮1</el-button>
      <el-button @click="confirm2">按钮2</el-button>
  
      <ht-search-form :dictMap="dictMap" :queryParams="queryParams" :outputQueryParams="queryParams"
        :formOptions="formOptions" :advOptions="[]" :beforeSearchCallback="false"
        @beforeSearchCallback="beforeSearchCallback" :clearCallBack="clearCallBack">
        <template slot="endSlotOption">
          <amount-range-search label="金额区间" ref="amountRangeSearch"></amount-range-search>
        </template>
      </ht-search-form>
      <ht-table ref="dataTable" rowKey="coreId" :showSerialNumber="false" :multi-select="false" :dictMap="dictMap"
        :reqConfig="reqConfig" :queryParams="queryParams" :tableBindColumns="tableBindColumns" :opButtonList="opButtonList">
        <template v-slot:operate>
          <el-table-column label="操作" align="left" width="80" fixed="right" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <ht-button-group :buttonList="[
                {
                  label: '明细',
                  doFunc: () => {
                    toViewDetail(scope.row);
                  },
                },
                {
                  label: '修改',
                  visible: scope.row.status == '02' || scope.row.status == '04' || scope.row.status == '16',
  
                  doFunc: () => {
                    toEdit(scope.row);
                  },
                },
              ]" />
            </template>
          </el-table-column>
        </template>
      </ht-table>
      <edit-info-dialog ref="editInfoDialog" :dictMap="dictMap" @editComplete="editComplete"></edit-info-dialog>
      <query-detail-dialog ref="queryDetailDialog" :dictMap="dictMap"></query-detail-dialog>
    </div>
  </template>
  <script>
  //import { mapGetters } from "vuex";
  //import { apiUrlConfig } from "@/api/cnaps/baseBiz/send/sendCommon.js";
  //import EditInfoDialog from "./components/EditInfo";
  //import QueryDetailDialog from "@/views/cnaps/baseBiz/send/components/queryDetail111";
  //import { listPageMixin } from "@/libs/listPageMixin";
  //import AmountRangeSearch from "@/views/components/AmountSearchInput";
  //import { reqGetBannerList, reqGetComparison } from "@/api";
  
  export default {
    name: "hvps111_send",
    mixins: [listPageMixin],
    components: {
      AmountRangeSearch,
      EditInfoDialog,
      QueryDetailDialog,
    },
    data() {
      return {
        reqConfig: apiUrlConfig,
        total: 0,
        dataList: [],
        //数据字典
        searchFormDictList: [
          "BIZ_TYPE_111",
          "PRIORITY3CODE",
          "CUST_FLAG1",
          "TXN_STATUS",
          "PKG_STATUS",
          "PROCESSSTATUS",
          "CBFLAG",
          "NON_STP_TYPE",
          "BIZ_CTGY",
          "CP2_STATUS",
          "CLLTN_NOTES_TYPE",
          "DFT_CTGY",
          "BANK_NOTE_TYPE",
          "TXN_SOURCE",
          "CUST_STATUS",
          "CBSTATUS",
          "BIZ_TYPE"
        ],
        // 遮罩层
        loading: true,
        // 弹出层标题
        title: "",
        showSearch: true,
        // 日期范围
        dateRange: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          id: "",
          txnStatus: "",
          amount1: "",
          cpgdate1: "",
          cpgdate2: "",
          amount2: "",
          dateRange: "",
          payerActno: "",
          pkgNo: "hvps.111.001.01",
          drct: "1",
        },
        formOptions: [],
        opButtonList: () => {
          return [
            {
              label: "新增交易",
              type: "primary",
              clickFun: () => {
                this.transAdd();
              },
            },
          ];
        },
        tableBindColumns: [
          { label: `交易流水号`, prop: "coreId", width: "170" },
          { label: `交易金额`, prop: "amount", width: "120", type: "price", align: "right" },
          { label: `CPG日期`, prop: "vdate", width: "100" },
          { label: `付款人`, prop: "payerName", width: "160", sortable: false },
          { label: `付款账号`, prop: "payerActno", width: "160" },
          {
            label: `付款行名`,
            prop: "payerBrname",
            width: "160",
            sortable: false,
          },
          { label: `收款人`, prop: "payeeName", width: "160", sortable: false },
          { label: `收款账号`, prop: "payeeActno", width: "160" },
          {
            label: `收款行名`,
            prop: "payeeBrname",
            width: "160",
            sortable: false,
          },
          {
            label: `业务状态`,
            prop: "status",
            width: "80",
            dictCode: "TXN_STATUS",
            sortable: false,
            fixed: "right",
            align: "center",
          },
          {
            label: `通讯状态`,
            prop: "comStatus",
            width: "100",
            dictCode: "PKG_STATUS",
            sortable: false,
            fixed: "right",
            align: "center",
          },
          {
            label: `人行状态`,
            prop: "procStatus",
            width: "80",
            dictCode: "PROCESSSTATUS",
            sortable: false,
            fixed: "right",
            align: "center",
          },
        ],
      };
    },
    computed: {
      ...mapGetters(["name", "globalBusData"]),
    },
    created() {
      this.queryParams.brno = this.globalBusData.brno;
    },
    mounted() {
      this.$refs.amountRangeSearch.$on('getAmountRange', this.beforeSearchCallback);
  
      this.formOptions = [
        {
          type: "input",
          prop: "id",
          defaultAttr: {
            label: "流水号",
            placeholder: "请输入交易流水号",
          },
        },
        {
          type: "input",
          prop: "payerActno",
          defaultAttr: {
            label: "付款账号",
            placeholder: "请输入付款人账号",
          },
        },
        {
          type: "dict",
          dict: "TXN_STATUS",
          prop: "txnStatus",
          defaultAttr: {
            label: "业务状态",
            placeholder: "请选择业务状态",
          },
        },
        {
          type: "dates",
          nameObj: {
            startTimeName: "cpgdate1",
            endTimeName: "cpgdate2",
          },
          defaultAttr: {
            label: "CPG日期",
            placeholder: ["请输入开始日期", "请输入结束日期"],
            format: "yyyy-MM-dd",
            valueFormat: "yyyyMMdd",
          },
        },
      ];
    },
    methods: {
      editComplete(state) {
        console.log("editComplete", state);
        if (state == true) {
          this.getList();
        }
      },
      beforeSearchCallback() {
        // 搜索按钮之前先执行
        this.queryParams.amount1 = this.$refs.amountRangeSearch.getAmount1();
        this.queryParams.amount2 = this.$refs.amountRangeSearch.getAmount2();
      },
      clearCallBack() {
        let that = this;
        return new Promise(function (resolve, reject) {
          that.$refs.amountRangeSearch.clearAmount();
          that.queryParams.amount1 = "";
          that.queryParams.amount2 = "";
        });
      },
      /** todo 查询当天操作员的交易记录 */
      getList() {
        this.doQuery();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 新增按钮操作 */
      transAdd() {
        console.log("this.$refs.editInfoDialog", this.$refs.editInfoDialog);
        this.$refs.editInfoDialog.show();
      },
      /*查看明细*/
      toViewDetail(row) {
        console.log("this.$refs.queryDetailDialog", this.$refs);
        this.$refs.queryDetailDialog.show(row.coreId, row.pkgNo);
      },
      /*'02-复核拒绝', '04-审核拒绝', '16-授权拒绝' 可以修改*/
      toEdit(row) {
        console.log("this.$refs.editInfoDialog", this.$refs.editInfoDialog);
        this.$refs.editInfoDialog.editShow(row.coreId, row.pkgNo);
      },
  
      //点击拒绝按钮
      confirm1() {
        reqGetBannerList()
          .then((response) => {
            console.log("response", response);
            console.log("success");
            this.msgSuccess("操作1成功");
          })
          .catch((err) => {
            console.log("error----", err);
            this.loading = false;
          });
      },
  
      confirm2() {
        reqGetComparison()
          .then((response) => {
            console.log("response", response);
            console.log("success");
            this.msgSuccess("操作2成功");
          })
          .catch((err) => {
            console.log("error----", err);
            this.loading = false;
          });
      },
  
  
    },
  };
  </script>
  <style>
  .label-header-msg {
    font-weight: bold;
  }
  </style>
  